import React, { Component } from 'react'
import {
  Card,
  Form,
  Input,
  Radio,
  InputNumber,
  Select,
  Switch,
  DatePicker,
  TimePicker,
  Upload,
  Icon,
  Checkbox,
  Button,
  message
} from 'antd'
import moment from 'moment'
class Register extends Component {
  state = {
    loading: false
  }

  handleSubmit = (e) => {
    e.preventDefault()
    let regInfo = this.props.form.getFieldsValue()
    console.log(regInfo)
    this.props.form.validateFields((err, values) => {
      if (!err) {
        message.success(`恭喜您注册成功！`)
      }
    })
  }

  render() {
    const FormItem = Form.Item
    const Option = Select.Option
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: 24,
        sm: 4
      },
      wrapperCol: {
        xs: 24,
        sm: 12
      }
    }
    const formItemOffsetLayout = {
      wrapperCol: {
        xs: 24,
        sm: {
          offset: 4,
          span: 12
        }
      }
    }
    const dateFormate = 'YYYY-MM-DD'
    const imageUrl = ''
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    )
    return (
      <div>
        <Card title="注册表单">
          <Form>
            <FormItem label="用户名" {...formItemLayout}>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '请输入用户名'
                  }
                ]
              })(<Input placeholder="请输入用户名" />)}
            </FormItem>
            <FormItem label="密码" {...formItemLayout}>
              {getFieldDecorator('passwd', {
                rules: [
                  {
                    required: true,
                    message: '请输入密码'
                  }
                ]
              })(<Input type="password" placeholder="请输入密码" />)}
            </FormItem>
            <FormItem label="性别" {...formItemLayout}>
              {getFieldDecorator('sex', {
                initialValue: 1
              })(
                <Radio.Group>
                  <Radio value={1}>男</Radio>
                  <Radio value={2}>女</Radio>
                </Radio.Group>
              )}
            </FormItem>
            <FormItem label="年龄" {...formItemLayout}>
              {getFieldDecorator('age', {
                initialValue: 18
              })(<InputNumber />)}
            </FormItem>
            <FormItem label="当前状态" {...formItemLayout}>
              {getFieldDecorator('state', {
                initialValue: '1'
              })(
                <Select>
                  <Option value="1">咸鱼一条</Option>
                  <Option value="2">江南才子</Option>
                  <Option value="3">爽的一比</Option>
                  <Option value="4">开心快乐</Option>
                  <Option value="5">很有梦想</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="爱好" {...formItemLayout}>
              {getFieldDecorator('state', {
                initialValue: ['1', '2']
              })(
                <Select mode="multiple">
                  <Option value="1">羽毛球</Option>
                  <Option value="2">篮球</Option>
                  <Option value="3">游戏</Option>
                  <Option value="4">游泳</Option>
                  <Option value="5">健身</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="是否已婚" {...formItemLayout}>
              {getFieldDecorator('isMarried', {
                valuePropName: 'checked',
                initialValue: true
              })(<Switch />)}
            </FormItem>
            <FormItem label="生日" {...formItemLayout}>
              {getFieldDecorator('birthday', {
                initialValue: moment('2015/01/01', dateFormate)
              })(<DatePicker format={dateFormate} />)}
            </FormItem>
            <FormItem label="联系地址" {...formItemLayout}>
              {getFieldDecorator('address', {
                initialValue: '广州市番禺区大石街道'
              })(<Input.TextArea />)}
            </FormItem>
            <FormItem label="早起时间" {...formItemLayout}>
              {getFieldDecorator('time', {
                initialValue: moment('9:22:30', 'HH:mm:ss')
              })(<TimePicker />)}
            </FormItem>
            <FormItem label="头像" {...formItemLayout}>
              {getFieldDecorator('userImg', {
                rules: [{ required: true }]
              })(
                <Upload
                  name="avatar"
                  listType="picture-card"
                  className="avatar-uploader"
                  showUploadList={false}
                  action="//jsonplaceholder.typicode.com/posts/"
                  onChange={this.handleChange}
                >
                  {imageUrl ? (
                    <img src={imageUrl} alt="avatar" />
                  ) : (
                    uploadButton
                  )}
                </Upload>
              )}
            </FormItem>
            <FormItem {...formItemOffsetLayout}>
              {getFieldDecorator('read', {
                initialValue: true,
                valuePropName: 'checked'
              })(
                <Checkbox>
                  我已阅读过<a href="#/admin/form/reg">慕课协议</a>
                </Checkbox>
              )}
            </FormItem>
            <FormItem {...formItemOffsetLayout}>
              <Button onClick={this.handleSubmit} type="primary">注册</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    )
  }
}

export default Form.create()(Register)
